<template>
	<!-- 蔬菜详情界面 -->
	<view id="vegrtablesDetails">
		<!-- 头 -->
		<view class="vegrtablesDetails_header"> </view>
		<!-- 身 -->
		<view class="vegrtablesDetails_main">
			<!-- 图片和详情 -->
			<view class="header">
				<!-- 图片 -->
				<image class="header_img" src="../../static/images/vegrtablesDetails_img@2x.png" />
				<!-- 详情 -->
				<view class="header_main">
					<!-- 名字 -->
					<view class="header_main_name">莴苣5斤新鲜农家自种莴笋蔬菜整箱青笋特产 批发10</view>
					<!-- 月售评星分享 -->
					<view class="header_main_main">
						<view class="month_sales">月售4212</view>
						<view class="sale">
							<image src="../../static/images/star-halfselected@2x.png" />
							<image src="../../static/images/star-halfselected@2x.png" />
							<image src="../../static/images/star-halfselected@2x.png" />
							<image src="../../static/images/star-halfselected@2x.png" />
							<image src="../../static/images/star-halfselected@2x.png" />
						</view>
						<view class="share">一键分享</view>
					</view>
					<!-- 价格和加入购物车 -->
					<view class="header_main_footer">
						<!-- 价格 -->
						<view class="price">
							<text>￥</text>
							<text>29.90</text>
						</view>
						<!-- 标签 -->
						<view class="label">
							<view>参与分销</view>
						</view>
						<!-- 加入购物车 -->
						<view class="shopCar">加入购物车</view>
					</view>
				</view>
			</view>
			<!-- 评价 -->
			<view class="main" @click="clickEvaluate">
				<!-- 名称 -->
				<view class="header">
					<view>商品评价</view>
					<view>
						<text>690人评价</text>
						<image src="../../static/images/cut@2x.png" />
					</view>
				</view>
				<!-- 标签 -->
				<view class="label">
					<view>新鲜142</view>
					<view :class="{ active: activeLabel === 0 }">不新鲜41</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeLabel: 0, //标签激活样式
			}
		},
		methods: {
// 点击跳转页面
    clickEvaluate() {
      uni.navigateTo({
        url: '../evaluate/evaluate',
      });
    },
		}
	}
</script>

<style lang="less" scoped>
	#vegrtablesDetails {
		display: flex;
		flex-direction: column;

		// 头
		.vegrtablesDetails_header {

			/* 顶部名称 */
			.top {
				height: 88rpx;
				background: linear-gradient(to right bottom, #28c84e, #0fd41d);
				display: flex;
				align-items: center;

				image {
					width: 70rpx;
					height: 80rpx;
					vertical-align: middle;
					padding-right: 80rpx;
				}

				view:nth-child(2) {
					flex: 1;
					text-align: center;
					font-size: 34rpx;
					font-weight: bold;
					color: #fff;
					vertical-align: middle;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}

				.null {
					width: 200rpx;
				}
			}
		}

		// 身
		.vegrtablesDetails_main {

			// 图片和详情
			.header {
				position: relative;

				// 图片
				.header_img {
					width: 100%;
					height: 872rpx;
				}

				// 详情
				.header_main {
					position: absolute;
					bottom: -20rpx;
					background: #fff;
					margin: 0 20rpx;
					padding: 20rpx;
					border-radius: 10rpx;

					// 名字
					.header_main_name {
						font-size: 34rpx;
						font-weight: bold;
						color: #333;
						padding-bottom: 20rpx;
					}

					// 月售评星分享
					.header_main_main {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding-bottom: 20rpx;

						// 月售
						.month_sales {
							font-size: 28rpx;
							margin-right: 20rpx;
						}

						// 评星
						.sale {
							flex: 1;

							image {
								width: 40rpx;
								height: 40rpx;
							}
						}

						// 分享
						.share {
							color: #fff;
							font-size: 32rpx;
							width: 158rpx;
							height: 48rpx;
							text-align: center;
							line-height: 48rpx;
							background: linear-gradient(135deg,
								rgba(0, 191, 127, 1) 0%,
								rgba(10, 204, 90, 1) 100%);
							border-radius: 10px;
						}
					}

					// 价格和加入购物车
					.header_main_footer {
						display: flex;
						justify-content: space-between;

						// 价格
						.price {
							font-size: 20rpx;
							margin-right: 20rpx;

							text:last-child {
								font-size: 34rpx;
								color: #f63;
								font-weight: bold;
							}
						}

						// 标签
						.label {
							flex: 1;

							view {
								width: 128rpx;
								height: 40rpx;
								text-align: center;
								line-height: 40rpx;
								border: 2px solid rgba(1, 193, 123, 1);
								border-radius: 10px;
								color: #02c177;
								font-size: 24rpx;
							}
						}

						// 加入购物车
						.shopCar {
							color: #fff;
							font-size: 32rpx;
							width: 192rpx;
							height: 48rpx;
							text-align: center;
							line-height: 48rpx;
							background: linear-gradient(135deg,
								rgba(0, 191, 127, 1) 0%,
								rgba(10, 204, 90, 1) 100%);
							border-radius: 10px;
						}
					}
				}
			}

			// 评价
			.main {
				margin: 40rpx 20rpx 20rpx 20rpx;
				border-radius: 10px;
				background: #fff;

				// 名称
				.header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #999;
					font-size: 34rpx;
					height: 80rpx;
					border-bottom: 2rpx solid #f6f4f6;
					padding: 0 20rpx;

					view:first-child {
						color: #333;
						font-size: 34rpx;
						font-weight: bold;
					}

					image {
						width: 14rpx;
						height: 26rpx;
						margin-left: 20rpx;
					}
				}

				// 标签
				.label {
					display: flex;
					padding: 20rpx 20rpx;

					view {
						height: 48rpx;
						line-height: 48rpx;
						text-align: center;
						color: #00c07c;
						font-size: 28rpx;
						padding: 0 10rpx;
						margin: 0 20rpx 0 20rpx;
						background: rgba(230, 255, 244, 1);
						border-radius: 10px;
					}

					.active {
						border: 2rpx solid rgba(153, 153, 153, 1);
						background: #fff;
						color: #999;
					}
				}
			}
		}
	}
</style>
